<template>
    <view>
        <u-navbar title="销售商销售合同签订" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="page-body">
			<view class="apply-content">
			    <view class="coreshop-padding-15">
					
				
			        <u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
			         <u-form-item label="甲方" prop="name"  style="font-weight: bold;" >
			         </u-form-item>
					 
					 <u-form-item label="公司名称：" prop="companyName" required="true">
					     <u-input type="text" placeholder="请输入公司名称" v-model="form.companyName" />
					 </u-form-item>
					 
					 <u-form-item label="公司地址：" prop="companyAddress" required="true">
					     <u-input type="text" placeholder="请输入公司地址"  v-model="form.companyAddress" />
					 </u-form-item>

					 <u-form-item label="联系人：" prop="name" required="true">
			             <u-input type="text" placeholder="请输入姓名" v-model="form.name" />
			         </u-form-item>
			         <u-form-item label="联系号码：" prop="mobile" required="true">
			             <u-input type="number" placeholder="请输入联系手机号" v-model="form.mobile"  />
			         </u-form-item>

					 <u-form-item label="上传营业执照" label-position="top" :border-bottom="false" required="true" labelWidth="100">
					   <view>
					     <view v-for="(img, key) in images" :key="key" v-if="images.length"  style="display: inline-block;vertical-align: middle;margin-right: 20rpx;">
					       <image class="delet" src="/static/images/common/del.png" mode=""  @click="removeImg(key)"></image>
					       <image :src="img" class="image-list" @click="clickImg(img)"></image>
					     </view>
					     <view style="display: inline-block;vertical-align: middle;margin-right: 20rpx;">
					       <view class="add-proof u-flex u-row-center" @click="uploadImg">
					         <u-icon name="plus" size="68" color="#999"></u-icon>
					       </view>
					     </view>
					   </view>
					 </u-form-item>
					 <u-form-item label="乙方" prop="name" style="font-weight: bold;">
					 </u-form-item>
			
					 <u-form-item label="公司名称：" prop="companyName" >
						 <u--text text="杭州沃服环保科技有限公司"></u--text>
					 </u-form-item>
					 
					 <u-form-item label="公司地址：" prop="companyAddress" >
						  <u--text text="浙江省杭州市钱塘区白杨街道18号大街17号1幢4楼401室"></u--text>
					 </u-form-item>
					 
					 <u-form-item label="联系人：" prop="name" >
					     <u--text text="闵明丽"></u--text>
					 </u-form-item>
					 
					 <u-form-item label="联系号码：" prop="mobile" >
					    <u--text text="18969170667"></u--text>
					 </u-form-item>
					 
			        </u--form>
			     
			    </view>
				<view class="u-content">
				    <u-parse :content="content" :selectable="true"></u-parse>
				</view>
			    <view class="coreshop-padding-15">
			        <u-button :custom-style="customStyle" type="error" size="normal" @click="submit()">签订合同</u-button>
			    </view>
			</view>
			
			
           
        </view>
    </view>

</template>
<script>
	import {
		mapState
	} from 'vuex';
	
    export default {
        data() {
            return {
				form: {
				    name: '',
				    companyName: '',
				    companyAddress: '',
				    mobile: '',
				    checked: false,
				    isAgreement: 'off',
					imageValueCompany:'',
					imageValueFront:'',
					imageValueBack:''
				},
				images: [],
                content: this.$store.state.config.dealerNotes,
				rules: {
				    name: [
				        {
				            required: true,
				            message: '请输入姓名',
				            trigger: ['blur', 'change']
				        },
				        {
				            min: 2,
				            max: 20,
				            message: '长度在10个汉字之内'
				        }
				    ],
				    companyName: [
				        {
				            required: true,
				            message: '请输入公司名称',
				            trigger: ['blur', 'change']
				        }
				    ],
				    companyAddress: [
				        {
				            required: true,
				            message: '请输入公司地址',
				            trigger: ['blur', 'change']
				        }
				    ],
				    mobile: [
				        {
				            required: true,
				            message: '请输入手机号码',
				            trigger: ['blur', 'change']
				        },
				        {
				            validator: (rule, value, callback) => {
				                return this.$u.test.mobile(value);
				            },
				            message: '手机号码不正确',
				            trigger: ['change', 'blur'],
				        }
				    ]
				}
            }
        },
		
		onReady() {
		    this.$refs.uForm.setRules(this.rules);
		},
		
        onLoad(e) {
			var _this = this;
			_this.$u.api.getDealerInfo({ check_condition: true }).then(res => {
			    if (res.status) {
			        _this.form.name=res.data.name;
				   _this.form.companyName=res.data.companyName;
				   _this.form.mobile=res.data.mobile;
				   _this.form.companyAddress=res.data.areaName.replace(/[, ]/g,'')+res.data.companyAddress;
			       _this.info = res.data;
			    } else {
			        //报错了
			        _this.$u.toast(res.msg);
			    }
			});
			
        },
        computed: {
        },
        methods: {
			
			// 上传图片
			uploadImg() {
			    this.$upload.uploadFiles(null, res => {
			        if (res.status) {
			            this.images.push(res.data.src)
						this.form.imageValueCompany=res.data.src;
			            //this.$refs.uToast.show({ message: res.msg, type: 'success', back: false })
			        } else {
			            this.$u.toast(res.msg)
			        }
			    })
			},
			removeImg(key) {
			    this.images.splice(key, 1)
				this.imageList.map(i => {this.form.imageValueCompany += i + '|'})
			},
			clickImg(img) {
			    // 预览图片
			    uni.previewImage({
			        urls: img.split()
			    });
			},
			submit() {
			    this.$refs.uForm.validate().then(res => {
		
			        if (this.form.imageValueCompany == '') {
			            this.$u.toast('请上传营业执照')
			            return false;
			        }

			        let data = {
			            name: this.form.name,
			            companyName: this.form.companyName,
			            companyAddress: this.form.companyAddress,
						companyAddress: this.form.companyAddress,
						imageValueCompany:this.form.imageValueCompany,
			            mobile: this.form.mobile
			           }
                    console.log('2212');
			        this.$u.api.applyDealerContact(data).then(res => {
			            if (res.status) {
							this.$u.toast('签订成功，稍后我们会联系您');
							setTimeout(function () {
							    uni.navigateTo({
							        url: '/pages/member/dealer/panel/panel'
							    })
							}, 1000);
							
			            } else {
			                this.$u.toast(res.msg);
			            }
			        });
			    }).catch(errors => {
			        uni.$u.toast('请填写相关信息后进行提交！')
			    })
			},
        }
    }
</script>
<style lang="scss" scoped>
    @import "notice.scss";
</style>
